<!--
 * @Author: wangshuguang
 * @Date: 2022-02-17 16:29:20
 * @LastEditTime: 2022-03-24 11:15:01
 * @LastEditors: wangshuguang
 * @Description: 文件描述...
-->
<template>
  <div class="infoConfig">

    <!-- 机构购买详情 -->
    <div v-if="baseData.businessType == 'IN' && spInfo.roleAlias == 'boss'" class="mercDetail">
      <el-form :v-model="form" label-width="100px" label-position="left">
        <el-row>

          <el-col :span="12">
            <el-form-item label="业务单号">{{ form.businessNo }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="订单金额">￥{{ form.payAmount }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="折扣">{{ form.discount }}折</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="可获流量余额">{{ form.flowBalance }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收款公户">
              <div>{{ `${form.accountBankName}(${form.accountBranchBank})` }}</div>
              <div>{{ form.accountNo }}</div>
              <div>{{ form.accountName }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态">{{ form.ordStatusZh }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="更新时间">{{ form.updateTime }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item v-if="form.ordStatus == 'F'" label="原因">{{ form.remark }}</el-form-item>
          </el-col>
        </el-row>
        <el-form :v-model="form" label-width="100px" label-position="top">
          <el-row>
            <el-col :span="24">
              <el-form-item label="打款凭证">
                <viewer :images="form.imgArr" class="imgArr">
                  <img v-for="item in form.imgArr" :key="item" class="avue-upload__avatar" :src="item">
                </viewer>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-form></div>

    <!-- 代理详情、机构出售详情 -->
    <div v-else class="agtDetail">
      <div class="leftLine mg-b-20">业务信息</div>
      <el-form :v-model="form" label-width="100px" label-position="left">
        <!-- 代理出售 机构出售 -->
        <div v-if="baseData.businessType == 'OUT'">
          <el-form-item label="业务单号">{{ form.businessNo }}</el-form-item>
          <el-form-item label="交易对象">
            <span>{{ form.payee }}</span>
            <span>({{ form.payeeRoleTypeZh }})</span>
          </el-form-item>
          <el-form-item label="业务类型">{{ form.businessTypeZh }}</el-form-item>
          <el-form-item label="流量余额">{{ form.symbolFlowBalance + form.flowBalance }}</el-form-item>
          <el-form-item label="备注">{{ form.remark }}</el-form-item>
          <el-form-item label="完成时间">{{ dateFtt('yyyy-MM-dd hh:mm:ss' ,new Date(form.createTime) ) }}</el-form-item>
          <div class="leftLine mg-b-20">交易入账信息</div>
          <el-form-item label="支付单号">{{ form.payTranNo }}</el-form-item>
          <el-form-item label="状态">{{ form.rechargeStatusZh }}</el-form-item>
          <el-form-item label="入账金额">{{ `${form.symbolPayAmount}￥${form.payAmount}` }}</el-form-item>
          <el-form-item label="入账方式">{{ payType[form.payType] }}</el-form-item>
          <el-form-item label="入账时间">{{ dateFtt('yyyy-MM-dd hh:mm:ss', new Date(form.updateTime)) }}</el-form-item>
        </div>
        <!-- 代理购买详情 -->
        <div v-else>
          <el-form-item label="业务单号">{{ form.businessNo }}</el-form-item>
          <el-form-item label="业务单号">{{ form.businessNo }}</el-form-item>
          <el-form-item label="交易对象">-</el-form-item>
          <el-form-item label="业务类型">{{ form.businessTypeZh }}</el-form-item>
          <el-form-item label="流量余额">{{ form.symbolFlowBalance + form.flowBalance }}</el-form-item>
          <el-form-item label="备注">{{ form.remark }}</el-form-item>
          <el-form-item label="完成时间">{{ dateFtt('yyyy-MM-dd hh:mm:ss' ,new Date(form.createTime) ) }}</el-form-item>
          <div class="leftLine mg-b-20">支付信息</div>
          <el-form-item label="支付单号">{{ form.payTranNo }}</el-form-item>
          <el-form-item label="状态">{{ form.rechargeStatusZh }}</el-form-item>
          <el-form-item v-if="form.symbolPayAmount != null" label="支付金额">{{ `${form.symbolPayAmount}￥${form.payAmount}` }}</el-form-item>
          <el-form-item v-else label="支付金额">-</el-form-item>
          <el-form-item label="支付方式">{{ payType[form.payType] }}</el-form-item>
          <el-form-item label="支付时间">{{ dateFtt('yyyy-MM-dd hh:mm:ss', new Date(form.updateTime)) }}</el-form-item>
        </div>

      </el-form>
    </div>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { dateFtt } from '@/utils'
export default {
  props: {
    infoConfig: {}
  },
  data() {
    return {
      dateFtt,
      form: {},
      payType: {
        WX: '微信',
        ZFB: '支付宝',
        WALL: '钱包余额'
      }
    }
  },
  computed: {
    baseData() { return this.infoConfig.data },
    pageType() { return this.infoConfig.type },
    ...mapGetters(['agentFlow', 'spInfo'])
  },
  mounted() {
    this.form = this.infoConfig.data
  },
  methods: {
    resolve() {
      this.$confirm('是否确定审核通过？请务必确认已收到对应款项，审核通过后系统将自动给机构：划算吧 下发100000流量', '提示').then(_ => {
      })
    },
    reject() {
      this.$confirm('是否确定拒绝？', '提示').then(_ => {
      })
    },
    addLine(type) {
      switch (type) {
        case 'merc':
          this.mercList.push({ name: '一级代理', a: 123, b: 123 })
          break
        default:
          break
      }
    }
  }

}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.infoConfig{
  padding: 20px;
}
::v-deep.imgArr{
  .avue-upload__avatar{
    width: 100px;
    margin-right: 20px;
  }
}
</style>
